<script>
import styleVue from "./style";
import { MessageBox } from '../../../ui-components';
export default {
    mixins: [styleVue],
    props: {
        fileArray: {
            type: Array,
            default: () => []
        },
        addBtnEvent: {
            type: Function,
            default: () => {}
        },
        delete: {
            type: Function,
            default: () => {}
        },
        upload: {
            type: Function,
            default: () => {}
        },
    },
    data() {
        return {
            longPressTimer: null,
            longPressTime: 1000,
            shortClickTime: 300,//用户做一次点击操作所允许的最大值，单位毫秒
            slideDistance: 30,//用户做一次点击操作所允许滑动的最大距离，单位px,
        }
    },
    methods: {
        addImg() {
            this.addBtnEvent();
        },
        //清除计时器
        clearLongPressTimer() {
            clearTimeout(this.longPressTimer);
            this.longPressTimer = null;
        },
        //删除选中的图片
        deleteImg(index) {
            this.delete(index);
        },
        //显示遮罩层
        showCover(index) {
            // setTimeout(() => {
            //     this.coverShow = true;
            //     this.coverSrc = this.fileArray[index];
            //     document.body.appendChild(this.$refs.gwImgCover);
            // }, 400);
        },
        touchStartEvent(event, index) {
            console.log("触发touchstart事件");
            
            this.longPressTimer = setTimeout(() => {
                console.log(`第${index}个长按事件触发`);
                MessageBox.confirm('要删除这张图片吗？').then(action => {
                    //确定事件
                    this.deleteImg(index);
                }, cancel => {
                    //取消删除
                });
                this.clearLongPressTimer();
            }, this.longPressTime);
            //定义一个时间戳，代表用户按下手指的起始时间
            this.startTime = new Date().getTime();
            //定义一个对象，代表用户按下的手指位置
            // console.log(event);
            this.startPos = {
                posX: event.touches[0].clientX,
                posY: event.touches[0].clientY
            }
        },
        touchMove() {
            this.clearLongPressTimer();
        },
        touchEnd(event, index) {
            this.clearLongPressTimer();
            //如果用户手指抬起的结束时间小于this.shortClickTime并且滑动距离不大于this.slideDistance
            //可以认为用户做了一次点击事件
            let endPos = {
                posX: event.changedTouches[0].clientX,
                posY: event.changedTouches[0].clientY
            }
            let endTime = new Date().getTime();
            if (endTime - this.startTime < this.shortClickTime && Math.abs(endPos.posX - this.startPos.posX) < this.slideDistance && Math.abs(endPos.posY - this.startPos.posY) < this.slideDistance) {
                console.log("用户触发了点击事件");
                //弹出一个遮罩层，显示用户点击的图片大图
                this.showCover(index);
            }
            //做一下清理操作
            this.startPos = null;
            this.startTime = null;
        }
    },
    created() {
    },
    render() {
        let list = this.fileArray.map((item, index) => {
            return (
                <div style={this.itemBoxStyle} class="itemBox" key={"itemBox" + index}>
                    <div 
                        style={{width: this.itemBoxWidth, height: 0, paddingBottom: this.itemBoxWidth, overflow: "hidden"}}
                        onTouchstart={(event) => this.touchStartEvent(event, index)}
                        onTouchmove={() => this.touchMove(index)}
                        onTouchend={(event) => this.touchEnd(event, index)} >
                        <img src={item.data} />
                    </div>
                </div>
            )
        });
        return (
            <div class="container">
                <div class="imgupload-forrn-box">
                    {list}
                    {
                        this.fileArray.length >= 5 ? 
                        <div></div> : 
                        <div 
                            onClick={() => this.addImg()}
                            style={{width: this.itemBoxWidth, height: this.itemBoxWidth}}
                            class="addBtnBox">
                            <img src="static/image/suneee-btn.png" class="addBtnImg" />
                        </div>
                    }
                </div>
                
            </div>
        )
    }
}
</script>
<style scoped>
    .container {
        background: #fff;
    }
    .imgupload-forrn-box {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #f2f2f2;
        padding-bottom: 2px;
    }
    /* .box:before {
        content: "";
        display: block
    }
    .box:after {
        content: "";
        display: block
    } */
    .itemBox {
        border: 1px solid #f1f1f1;
        margin-top: 2px;
        margin-right: 0.5rem;
        box-sizing: content-box;
    }
    .addBtnBox {
        /* border: 1px solid #ddd; */
        margin-top: 3px;
        margin-right: 0.5rem;
    }
    .addBtnImg {
        width: 100%;
        height: 100%;
    }
    .test {
        background: pink;
        width: 100px;
        height: 30px;
    }
</style>

